<template>
  <up-overlay :show="show">
    <view class="confirm-box">
      <view class="box-title">
        <text class="title-text">
          {{ title }}
        </text>
      </view>

      <view class="box-btn">
        <view v-if="showCancelBtn" class="btn-item btn-left" @click="handleClose">
          {{ cancelText }}
        </view>
        <view class="btn-item btn-right" @click="handleConfirm">
          {{ confirmText }}
        </view>
      </view>
    </view>
  </up-overlay>
</template>

<script lang="ts" setup>
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
});

defineProps({
  show: {
    type: Boolean,
    default: false,
  },

  title: {
    type: String,
    default: '',
  },

  cancelText: {
    type: String,
    default: '取消',
  },

  confirmText: {
    type: String,
    default: '确认',
  },

  showCancelBtn: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['update:show', 'confirm']);

const handleClose = () => {
  emit('update:show', false);
};

const handleConfirm = () => {
  emit('update:show', false);
  emit('confirm');
};
</script>

<style lang="scss" scoped>
.confirm-box {
  position: relative;
  width: 630rpx;
  height: 355rpx;
  padding: 44rpx 40rpx;
  border-radius: 32rpx;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;

  .box-title {
    flex: 1;
    padding-bottom: 25rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .title-text {
      font-size: 30rpx;
      color: #0F194D;
      line-height: 42rpx;
    }
  }

  .box-btn {
    display: flex;
    justify-content: space-between;

    .btn-item {
      width: 256rpx;
      color: #FFFFFF;
      text-align: center;
      font-weight: bold;
      font-size: 32rpx;
      line-height: 80rpx;
      border-radius: 40rpx;
      background: #E2E2E2;
    }

    .btn-left {
      margin-right: 38rpx;
    }

    .btn-right {
      flex: 1;
      background: linear-gradient( 90deg, rgba(246,216,108,0.98) 0%, #FFC122 100%);
    }
  }
}
</style>

<style lang="css">
.u-transition {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
